<template>
    <div class="shopbagItem">
        <van-swipe-cell :before-close="beforeClose">
            <div class="shopbagItemBox">
                <van-checkbox
                    v-model="itemData.checked"
                    checked-color="#3948bf"
                    @change="check"
                >
                </van-checkbox>

                <div class="img-box">
                    <img :src="itemData.small_img" alt="" />
                </div>
                <div class="P-stepper-box">
                    <div class="top-box">
                        <div>
                            <p class="p1">{{ itemData.name }}</p>
                            <p class="p2">{{ itemData.rule }}</p>
                        </div>
                        <p class="p3">{{ itemData.enname }}</p>
                    </div>
                    <div class="bottom-box">
                        <p class="p4">￥{{ itemData.price }}</p>
                        <van-stepper
                            v-model="itemData.count"
                            theme="round"
                            button-size="22"
                            disable-input
                            @change="count"
                            max="99"
                        />
                    </div>
                </div>
            </div>
            <template #right>
                <van-button square type="danger" text="删除" />
            </template>
        </van-swipe-cell>
    </div>
</template>

<script>
// 导入弹出提示框 vant组件
import { Dialog } from 'vant';
export default {
    name: "ShopbagItem",
    props: {
        // 接收 商品数据
        itemData: {
            type: Object,
            default() {
                return {};
            }
        },
    },

    methods: {
        // position 为关闭时点击的位置
        // instance 为对应的 SwipeCell 实例
        beforeClose({ position, instance }) {
            
            switch (position) {
                case 'left':
                case 'cell':
                case 'outside':
                    instance.close();
                    break;
                case 'right':
                    Dialog.confirm({
                        message: '确定删除吗？',
                    }).then(() => {
                        // 向父组件 传出 删除该商品
                        this.$emit('remove');

                    }).catch(() => { });
                    break;
            }
        },
        // 数量改变事件
        count() {
            this.$emit('count', { count: this.itemData.count });
        },
        //复选框事件
        check() {
            this.$emit('simpleCheck');
        }
    },

}
</script>

<style lang="less" scoped>
.shopbagItem {
    .shopbagItemBox {
        display: flex;
        height: 100px;
        align-items: center;
        margin: 10px;
        margin-bottom: 0;
        padding: 10px 12px;
        background-color: #fff;
        border-radius: 13px;
        .img-box {
            height: 100%;
            margin-left: 10px;
            margin-right: 10px;

            img {
                height: 100%;
                border-radius: 5px;
            }
        }
        .P-stepper-box {
            flex: 1;
            height: 100%;
            .top-box {
                width: 100%;
                div {
                    display: flex;
                    margin-bottom: 10px;
                    width: 100%;
                    .p1 {
                        max-width: 100px;
                        font-size: 16px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        word-break: break-all;
                    }
                    .p2 {
                        max-width: 90px;
                        font-size: 14px;
                        margin-left: 15px;
                        color: #999;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        word-break: break-all;
                    }
                }
                .p3 {
                    width: 210px;
                    font-size: 13px;
                    color: #808080;
                    margin-bottom: 19px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
            }
            .bottom-box {
                display: flex;
                justify-content: space-between;
                .p4 {
                    font-size: 16px;
                    font-weight: 600;
                    color: #3948bf;
                }
            }
        }
    }
    /deep/ .van-button {
        height: 100%;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }
}
</style>